<template>
  <div ref="barChart" class="barchart"></div>
</template>

<script>
export default {
  data() {
    return {
      barChart: null,
      xData2: ['公共必修课', '公共选修课', '专业必修', '专业选修'],
      data1: [250, 100, 130, 100],
      data2: [400, 400, 400, 400],
    }
  },
  mounted() {
    this.setBarChart()
  },
  methods: {
    setBarChart() {
      this.barChart = this.echarts.init(this.$refs.barChart)

      let barWidth = 60
      let colorList = [
        {
          start: '#225ea6',
          end: '#155498',
        },
        {
          start: '#429dbe',
          end: '#277b99',
        },
        {
          start: '#9b9a69',
          end: '#797c58',
        },
        {
          start: '#a6c1d4',
          end: '#859abd',
        },
      ]
      let that = this
      let option = {
        tooltip: {
          show: false,
          trigger: 'item',
        },
        grid: {
          left: '10%',
          bottom: '20%',
          right: '10%',
          top:'8%',
        },
        xAxis: {
          data: this.xData2,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
            margin: 26, //刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
        series: [
          {
            // 上半截柱子
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            z: 0,
            itemStyle: {
              color: '#4b7292',
              opacity: 0.7,
            },
            data: this.data2,
          },
          {
            //下半截柱子
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            itemStyle: {
              //lenged文本
              opacity: 0.7,
              color: function (params) {
                console.log(params)
                return new that.echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: colorList[params.dataIndex].start, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].end, // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },
            data: this.data1,
          },
          {
            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
              color: 'transparent',
            },
            data: this.data1,
          },
          {
            //上半截柱子顶部圆片
            type: 'pictorialBar',
            symbolSize: [barWidth, 15],
            symbolOffset: [0, -5],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              color: '#4b7292',
              opacity: 1,
            },
            label: {
              show: false,
              position: 'top',
              fontSize: 16,
              color: '#fff',
            },
            data: this.data2,
          },
          {
            //下半截柱子顶部圆片
            type: 'pictorialBar',
            symbolSize: [barWidth, 15],
            symbolOffset: [0, -10],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                return new that.echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: colorList[params.dataIndex].start, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].end, // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 16,
              color: '#fff',
              // formatter:(item)=>{
              //     console.log(item)
              //     return 'ssss'
              // }
            },
            symbolPosition: 'end',
            data: this.data1,
          },
          {
            type: 'pictorialBar',
            symbolSize: [47, 16],
            symbolOffset: [0, 11],
            z: 11,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: '#3ACDC5',
                borderWidth: 2,
              },
            },
            data: [1, 1, 1, 1],
          },
          {
            type: 'pictorialBar',
            symbolSize: [62, 22],
            symbolOffset: [0, 17],
            z: 10,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: '#02c3f1',
                borderWidth: 2,
              },
            },
            data: [1, 1, 1, 1],
          },
        ],
      }
      that.barChart.setOption(option, true)
    },
  },
}
</script>

<style scoped>
.barchart {
  width: 100%;
  height: 40%;
}
</style>